<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTTP Methods and Params</title>
    <script>
        // 使用 fetch 发起 put 请求
        async function putStudent() {
            const response = await fetch('/student', {
                method: 'PUT',
            })
            const data = await response.text()

            alert(data)
        }
        // 使用 fetch 发起 delete 请求
        async function deleteStudent() {
            const response = await fetch('/student', {
                method: 'DELETE',
            })
            const data = await response.text()
            alert(data)
        }
    </script>
</head>

<body>
    <h1>获取query参数: name, age</h1>
    <ul>
        <li>name: <%= name %>
        </li>
        <li>age: <%= age %>
        </li>
    </ul>
    <h1>发起 POST 请求</h1>
    <form action="/student/10/createdb?name=zhangsan&age=18" method="POST">
        <div>
            <label for="username">用户名:</label>
            <input type="text" name="username">
        </div>
        <div>
            <label for="password">密码:</label>
            <input type="password" name="password">
        </div>

        <button type="submit">发起 POST 请求</button>
    </form>

    <h1>发起 Put 请求</h1>

    <button onclick="putStudent()">发起 put 请求</button>


    <h1>发起 Delete 请求</h1>
    <button onclick="deleteStudent()">发起 delete 请求</button>
</body>

</html>